<template>
  <section id="nav">
    <div id="cate">
      <header class="header active" @mouseenter="showMenu()" @mouseleave="hideMenu()">
        <h3 class="title"><i class="icon icon-menu"></i>全部商品分类</h3>
      </header>

      <div class="cate" :class="{'show': $route.path === '/'}" v-show="show" @mouseenter="showMenu()"
           @mouseleave="hideMenu()">
        <ul class="cate_menu">
          <li class="cate_menu_item"
              v-for="(item, index) in cates"
              v-if="index < 4"
              :key="item.id"
          >
            <h2 class="first"><nuxt-link target="_blank" :to="{path:'/search', query: {variety: item.id}}">{{ item.name }}</nuxt-link></h2>
            <section class="child">
              <ul class="clearfix">
                <li v-for="child in item.categoryList">
                  <nuxt-link target="_blank" :to="{path:'/search', query: {variety: item.id, category: child.id}}">{{ child.name }}</nuxt-link>
                </li>
              </ul>
            </section>
          </li>
        </ul>
      </div>
    </div>
    <nav class="nav">
      <ul class="clearfix">
        <li>
          <nuxt-link :to="{ path: '/mall' }" target="_blank">商城</nuxt-link>
        </li>

        <li>
          <nuxt-link :to="{ path: '/purchase'}" target="_blank">采购信息</nuxt-link>
        </li>

        <li>
          <nuxt-link :to="{ path: '/testService'}" target="_blank">检测服务</nuxt-link>
        </li>

        <li>
          <a target="_blank" :href="platform.CONSTANT_JUMORE_JIN_URL">金融服务</a>
        </li>

        <li>
          <a target="_blank" :href="platform.CONSTANT_JUMORE_WULIU_URL">物流服务</a>
        </li>

        <li>
          <nuxt-link :to="{ path: '/news'}" target="_blank">行业资讯</nuxt-link>
        </li>
      </ul>
    </nav>
  </section>
</template>

<script>
  import axios from '~/plugins/axios'
  import platform from '~/config/platform/index'

  export default {

    components: {},
    data () {
      return {
        currentCategoryIndex: -1,
        timer: null,
        timer2: null,
        show: false,
        platform: platform,
        cates: this.$store.state.cates.cates
      }
    },

    mounted () {

    },

    methods: {
      /**
       * 显示分类列表
       * 在非首页的时候
       */
      showMenu () {
        this.show = true
      },

      /**
       * 隐藏分类列表
       * 在非首页的时候
       */
      hideMenu () {
        this.show = false
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../element-variables";

  #nav {
    height: 40px;
  }

  .first{
    font-size: 16px;
    line-height: 45px;
    font-weight: normal;
    color: $--color-primary;
  }

  #cate {
    position: relative;
    width: 220px;
    float: left;

    .header {
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      .icon {
        margin-right: 15px;
        width: 18px;
        height: 8px;
      }
      .title {
        font-size: 16px;
        color: #fff;
        font-weight: normal;
      }

      &.active, &:hover {
        background-color: #b78730;
      }
    }

    .cate {
      position: absolute;
      top: 41px;
      width: 100%;
      left: 0;
      z-index: 25;
    }

    .cate_menu {
      background-color: rgba(255, 255, 255, .9);
      height: 380px;
      padding: 0 20px;

      .child{
        ul{
          overflow: hidden;
          margin-left: -15px;
        }
        li{
          float: left;
          margin-left: 15px;
          line-height: 24px;
          color: #6e6e6e;
        }

        a:hover{
          color: $--color-primary;
        }
      }
    }
    .cate_menu_item {
      padding: 0 0 10px;
      max-height: 25%;
      overflow: hidden;
      position: relative;
      border-bottom: 1px solid #dedede;

      &:last-child{
        border-bottom: none;
      }

      > a {
        display: block;
        padding-left: 5px;
        border-bottom: 1px solid #dedede;
      }

      &:last-child a {
        border-bottom: none;
      }

      &:hover, &.is-active {
        color: $--color-primary;

        &:after {
          color: #fff;
        }
      }

    }
  }

  .nav {
    width: 970px;
    float: left;

    li {
      text-align: center;
      float: left;
      line-height: 40px;
      width: (970px / 6);
      font-size: 16px;
    }

    a {
      display: inline-block;
      height: 100%;
      position: relative;

      &:after {
        content: '';
        height: 2px;
        width: 100%;
        position: absolute;
        bottom: -1px;
        left: 0;
        background-color: transparent;
      }
    }

    a:hover,
    a.nuxt-link-active {
      color: $--color-primary;
      &:after {
        background-color: $--color-primary;
      }
    }

  }
</style>
